<template>
  <el-row>
    <el-col :span="12" :class="{ active: isSelect }" @click="manage">
      <div class="grid-content ep-bg-purple" />
      文章管理
    </el-col>
    <el-col :span="12" @click="post" :class="{ active: isSelect2 }">
      <div class="grid-content ep-bg-purple-light" />
      文章发布
    </el-col>
  </el-row>
  <div>
    <router-view></router-view>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import router from "./router";

let isSelect2 = ref(true);
let isSelect = ref(false);

function manage() {
  isSelect.value = true;
  isSelect2.value = false;
  router.push("/manage");
}
function post() {
  isSelect.value = false;
  isSelect2.value = true;
  router.push("/");
}
</script>
<style lang="css">
.active {
  background-color: antiquewhite;
  color: orangered;
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  cursor: pointer;
  border-radius: 4px;
  background-color: #cce;
  font-size: 26px;
  text-align: center;
  line-height: 50px;
  border: 1px solid;
}

.grid-content {
  border-radius: 4px;
}
</style>
